<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <el-card class="box-card">
      <h1 class="title">获取监控数据</h1>
      <el-button type="info" @click="getSnmp">获取监控信息按钮</el-button>
      <!-- 选择器 -->
      <el-select
        v-model="snmpValue"
        placeholder="请选择"
        style="margin-left: 10px"
        @change="snmpChange"
      >
        <el-option
          label="驻波比"
          value="1.3.6.1.4.1.46861.1.1.2.1.10.0"
        ></el-option>
        <el-option
          label="功耗"
          value="1.3.6.1.4.1.46861.1.1.1.2.13.1.0"
        ></el-option>
        <el-option
          label="频道"
          value="1.3.6.1.4.1.46861.1.1.1.1.2.0"
        ></el-option>
        <el-option
          label="信道"
          value="1.3.6.1.4.1.46861.1.1.1.2.7.1.0"
        ></el-option>
      </el-select>
      <!-- 重置按钮 -->
      <el-button
        type="primary"
        class="el-icon-refresh-right"
        style="margin-left: 10px"
        @click="snmpValue = ''"
        >重置选项</el-button
      >
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" v-loading="loading"  element-loading-text="加载中">
        <el-table-column prop="oid" label="指令" width="600"> </el-table-column>
        <el-table-column prop="value" label="数据返回" width="600">
        </el-table-column>
        <!-- <el-table-column prop="address" label="地址"> </el-table-column> -->
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getSnmpData, getSnmpOid } from "@/api/snmp";
import { Message } from "element-ui";
export default {
  name: "Dashboard",
  data() {
    return {
      tableData: [],
      // 加载布尔值
      loading: false,
      // snmp选项值
      snmpValue: "",
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {
    // 封装处理数据表翻译
    handleDataSnmp(tableData) {
      console.log(57, tableData);
      // 翻译指令
      tableData.forEach((item) => {
        switch (item.oid) {
          case "1.3.6.1.4.1.46861.1.1.2.1.10.0":
            item.oid = "驻波比";
            break;
          case "1.3.6.1.4.1.46861.1.1.1.2.13.1.0":
            item.oid = "功耗";
            break;
          case "1.3.6.1.4.1.46861.1.1.1.1.2.0":
            item.oid = "频道";
            break;
          case "1.3.6.1.4.1.46861.1.1.1.2.7.1.0":
            item.oid = "信道";
            break;
          default:
            break;
        }
      });
      return tableData;
    },
    async getSnmp(tableData) {
      this.loading = true;
      const res = await getSnmpData();
      if (res.data.meta.staus === 201) {
        this.loading = false;
        this.$message({
          message: res.data.meta.msg,
          type: "warning",
        });
      }
      if (res.data.meta.staus === 200) {
        this.loading = false;
        this.tableData = this.handleDataSnmp(res.data.data);
      }
    },
    // snmp选项
    async snmpChange(value) {
       this.loading = true;

      const res = await getSnmpOid({ oids: [value] });
      if (res.data.meta.staus === 201) {
        this.loading = false;
        this.$message({
          message: res.data.meta.msg,
          type: "warning",
        });
      }
      if (res.data.meta.staus === 200) {
        this.loading = false;
        this.tableData = this.handleDataSnmp(res.data.data);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
}
.timeBox {
  margin-top: 15px;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
